<template>
    <div ref="chart" :style="{ width: '100%', height: '100%', minHeight: '300px' }"></div>
</template>  
<script>
import * as echarts from 'echarts';
export default {
    props: {
        options: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            chart: null
        };
    },
    mounted () {
        this.chart = echarts.init(this.$refs.chart);
        this.chart.setOption(this.options);
    },
    beforeDestroy () {
        if (this.chart) {
            this.chart.dispose();
        }
    }
};
</script>